<!--
- Author:   .
- Date:    2018/1/11 0011.
- File:    integral.
-->
<template>
  <div class="Web_Box">
    <div class="integrat2 f-cb">
      <span>当前 {{memberInfo.freeze_balance}}</span>
      <!--<router-link :to="{name: 'member-spread'}" class="more">推荐用户购买</router-link>-->
    </div>
    <!--<div class="suborbox f-cb">-->
      <!--<div class="subornat"><i class="iconfont icon-downdot"></i>-->
        <!--<select v-model="selectUserLv">-->
          <!--<option value="">全部类型</option>-->
          <!--<option :value="$dictionary.userLv.a">一级</option>-->
          <!--<option :value="$dictionary.userLv.b">二级</option>-->
          <!--<option :value="$dictionary.userLv.c">三级</option>-->
        <!--</select>-->
      <!--</div>-->
      <!--&lt;!&ndash;<div class="screenbox" style="width: auto"><a><i class="iconfont icon-shijian" @click="openDatePicker"></i></a><router-link :to="{name: 'search-integral'}">搜索</router-link><router-link :to="{name: 'integral-other'}">其他</router-link></div>&ndash;&gt;-->
    <!--</div>-->
    <div v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="inter_tab" v-for="bill in billList.data"><a>
        <table width="100%" border="0" v-if="bill.state == '1'">
          <!--<tr>-->
            <!--<td width="50%">类型：{{bill.type | userLvTypeName}}</td>-->
            <!--<td width="50%">状态：{{bill.state | coinStatusTxt}}</td>-->
          <!--</tr>-->
          <tr>
            <td width="50%">状态：{{bill.state | coinStatusTxt}}</td>
            <td width="50%">奖励花币：<span class="cr_f83166">{{bill.freeze_balance}}</span></td>
          </tr>
          <tr>
            <td width="50%">会员服务费：<span>{{bill.order_amount}}</span></td>
            <td>贡献人：{{bill.xjname}}</td>
          </tr>
          <tr>
            <td>注册时间：{{bill.member_time | timestampToDate('yyyy-MM-dd')}}</td>
            <td>激活时间：{{bill.payment_time | timestampToDate('yyyy-MM-dd')}}</td>
          </tr>
        </table>
        <table width="100%" border="0" v-if="bill.state == '2'">
          <tr>
            <td width="50%">类型：{{bill.type | userLvTypeName}}</td>
            <td width="50%">状态：{{bill.state | coinStatusTxt}}</td>
          </tr>
          <tr>
            <td width="50%">扣除花币：<span class="cr_f83166">{{bill.freeze_balance}}</span></td>
          </tr>
          <tr>
            <td width="50%">退服务费：<span>{{bill.order_amount}}</span></td>
            <td>退款人：{{bill.xjname}}</td>
          </tr>
          <tr>
            <td>注册时间：{{bill.member_time | timestampToDate('yyyy-MM-dd')}}</td>
            <td>退款时间：{{bill.refund_time | timestampToDate('yyyy-MM-dd')}}</td>
          </tr>
        </table>
      </a></div>
    </div>
    <loading-more :allLoaded="billList.allLoaded" :show="billList.data.length > 0"></loading-more>
    <empty-data :show="billList.allLoaded && billList.data.length <= 0"></empty-data>
    <!--<footer-tab></footer-tab>-->
    <div class="pl20 pr20 mt35" style="position: fixed; bottom:  10px; width: 100%">
      <button type="button" class="but_1 wauto" @click="$utils.back">返回</button>
    </div>
    <datetime-picker
      ref="datePicker"
      v-model="currentDate"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value}日"
      @confirm="handleDateChange">
    </datetime-picker>
  </div>
</template>

<script>
  import DatetimePicker from '../../components/monthPicker'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: ['memberInfo']})
    ],
    data() {
      return {
        billList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        currentDate: new Date(),
        selectMonth: '',
        selectUserLv: ''
      }
    },
    components: {
      'datetime-picker': DatetimePicker
    },
    created() {
      this.initFlowerCoinBill()
    },
    computed: {},
    watch: {
      selectUserLv: function (value) {
        this.selectUserLv = value
        this.initFlowerCoinBill()
      }
    },
    methods: {
      openDatePicker() {
        this.$refs.datePicker.open()
      },

      handleDateChange(value) {
        let date = new Date(value)
        let dateStr = this.$utils.formatDate(date, 'yyyy-MM-dd')
        this.selectMonth = dateStr
        console.log(dateStr)
        this.initFlowerCoinBill()
      },
      initFlowerCoinBill() {
        this.billList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getFlowerCoinBill(this.billList.page, this.billList.pageSize)
      },
      getFlowerCoinBill(page, pageSize) {
        this.billList.loading = true
        let params = {
          type: this.selectUserLv,
          s_time: this.selectMonth,
          page: page,
          pageSize: pageSize
        }
        this.$request.getFlowerCoinBill(params).then(data => {
          if (data.length < this.billList.pageSize) {
            this.billList.allLoaded = true
          }
          this.billList.data = [...this.billList.data, ...data]
        }).finally(() => {
          this.billList.requested = true
          this.billList.loading = false
        })
      },
      loadMore() {
        if (this.billList.loading || this.billList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getFlowerCoinBill(++this.billList.page, this.billList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>